<template>
  <div id="app">
    <audio ref="audio" :src="musicUrl" autoplay></audio>
    <div class="top">
      <TopNav />
    </div>
    <router-view />
    <div class="bottom">
      <BottomPlayer />
    </div>
  </div>
</template>


<script>
import BottomPlayer from "./components/BottomPlayer";
import TopNav from "./components/TopNav";
import { mapState } from "vuex";
import Vue from "vue";

export default {
  name:"App",
  components: {
    BottomPlayer,
    TopNav,
  },
  computed: {
    ...mapState("player", ["musicUrl"]),
  },
  mounted() {
    // 将audio丢到vm上 随时可以对音频进行操作
    Vue.prototype.$audio = this.$refs.audio;
    // this.prototype.$audio = this.$refs.audio
    console.log(this);
  },
  methods: {},
};
</script>

<style lang="less">
html,
body {
  width: 100%;
  height: 100% !important;
  // background-color: rgb(244, 249, 250);
}
* {
  margin: 0;
  padding: 0;
}
#app {
  position: relative;
  height: 100%;
  width: 1200px;
  margin: 0 auto;
  background-color: rgb(255, 255, 255);
}

// 隐藏滚动条
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
a {
  color: #333;
  text-decoration: none;
}
.top {
  top: 0;
  // width: 1020px;
  // margin-left: 180px;
  z-index: 1;
  // position: fixed;
}
.bottom {
  bottom: 0;
  z-index: 1;
  width: 1200px;
  background-color: rgb(246, 246, 246);
  position: fixed;
}
</style>
